<template>
  <div class="myCheckin-calendar">
    <div class="calendar-header-wrap">
      <div class="hotel-calendar-header">
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
      </div>
    </div>
    <div class="calendar-body-wrap">
      <div class="single-month">
        <span class="cur-month">{{ datelist[0].month }}月</span>
        <table tab-index="0" cellpadding="0" cellspacing="0">
          <tbody>
          <tr v-for="m in 6">
            <td v-for="n in 7" :class="[(m-1)*7+(n-1)>=parseInt(datelist[0].week)&&((m-1)*7+(n-1)-parseInt(datelist[0].week))<datelist.length ? '' : 'no-ctx']">
              <template
                v-if="(m-1)*7+(n-1)>=parseInt(datelist[0].week)&&((m-1)*7+(n-1)-parseInt(datelist[0].week))<datelist.length">
                  <span
                    :class="[datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].able ? 'day-default' : 'day-default cant-pick', datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].ispick ? 'check' : '']"
                    :data-ymd="datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].ymd"
                    v-if="!datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].able">
                  {{ parseInt(datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].date) }}
                  </span>
                <div class="day-box"
                    v-if="datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].able">
                  <span
                    :class="[datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].able ? 'day-default' : 'day-default cant-pick', datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].ispick ? 'check' : '']"
                    :data-ymd="datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].ymd">
                    {{ parseInt(datelist[((m-1)*7+(n-1)-parseInt(datelist[0].week))].date) }}
                  </span>
                </div>
              </template>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="single-month-bg">{{ datelist[0].year }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['datelist'],
    created: function () {
    }
  }
</script>

<style lang="scss">
  @import '../../assets/sass/calendar/calendar';
</style>
